<template>
  <div class="dashboard-container">
    <div class="app-container">
      <PageTools :show="true">
        <span slot="before">共{{ total }}条记录</span>
        <template slot="after">
          <el-button size="small" type="success" @click="exportData">
            导出
          </el-button>
          <el-button
            size="small"
            type="warning"
            @click="$router.push('/import?type=user')"
          >
            导入
          </el-button>
          <el-button size="small" type="info" @click="addEmployee">
            + 新增员工
          </el-button>
          <!-- <el-button size="small" type="primary">
            导入
          </el-button> -->
        </template>
      </PageTools>

      <el-card>
        <el-table
          ref="districtTable"
          :data="list"
          style="width: 100%"
          border
          row-key="id"
          default-expand-all
          :select-on-indeterminate="true"
          @select-all="handleSelectionAll"
        >

          <el-table-column type="selection" width="55" :reserve-selection="true" />
          <el-table-column label="序号" width="60px">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            v-model="list.username"
            prop="username"
            label="姓名"
            width="100px"
          />
          <el-table-column
            v-model="list.mobile"
            prop="mobile"
            label="手机号"
            width="110px"
          />
          <el-table-column
            v-model="list.workNumber"
            prop="workNumber"
            label="工号"
            width="100px"
          />
          <!-- 进行转换 -->
          <el-table-column
            v-model="list.formOfEmployment"
            :formatter="formOfEmployment"
            prop="formOfEmployment"
            label="聘用形式"
            width="100px"
          />
          <el-table-column
            v-model="list.departmentName"
            prop="departmentName"
            label="部门"
            width="100px"
          />
          <!-- 修改入职时间格式为yyyy-mm-dd -->
          <!-- <el-table-column v-model="list.timeOfEntry" :formatter="timeOfEntry" prop="timeOfEntry" label="入职时间" width="110px" /> -->
          <el-table-column
            v-model="list.timeOfEntry"
            label="入职时间"
            width="120px"
          >
            <template slot-scope="{ row }">
              {{ row.timeOfEntry | formatDate }}
            </template>
          </el-table-column>
          <el-table-column
            v-model="list.inServiceStatus"
            :formatter="inServiceStatus"
            prop="inServiceStatus"
            label="是否在职"
            width="100px"
          />
          <el-table-column label="状态" width="100px">
            <template slot-scope="{ row }">
              <el-switch
                :value="row.enableState === 1"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button type="text" @click="$router.push('/employees/detail/' + row.id)">查看</el-button>
              <el-button type="text">转正</el-button>
              <el-button type="text">调岗</el-button>
              <el-button type="text" @click="showRole(row.id)">角色</el-button>
              <el-button type="text">离职</el-button>
              <el-button
                type="text"
                disabled
                @click="delEmployee(row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center">
          <el-pagination
            :current-page="settingPage.page"
            :page-sizes="[3, 4, 5, 6]"
            :page-size="settingPage.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            style="margin-top: 50px"
            @size-change="sizeChange"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>
      <addEmployee :show-dialog.sync="showDialog" @addEmployee="Employee" />
      <roleDailog :id="id" ref="showRoleDailog" :show-role-dailog.sync="showRoleDailog" />
    </div>
  </div>
</template>

<script>
import addEmployee from './components/add-employee'
import employees from '@/api/constant/employees'
import { getAllEmployees, delEmployee } from '@/api/employees'
import roleDailog from './components/role-dailog'
export default {
  components: {
    addEmployee,
    roleDailog
  },
  data() {
    return {
      settingPage: {
        page: 1,
        size: 5
      },
      list: [],
      total: 0,
      showDialog: false,
      multipleSelection: [],
      showRoleDailog: false,
      id: ''
    }
  },
  created() {
    this.getAllEmployees()
  },
  methods: {
    async getAllEmployees() {
      const { total, rows } = await getAllEmployees(this.settingPage)
      this.list = rows
      this.total = total
      // console.log(rows)
    },
    sizeChange(size) {
      this.settingPage.size = size
      this.getAllEmployees()
    },
    currentChange(page) {
      this.settingPage.page = page
      this.getAllEmployees()
    },
    formOfEmployment(row, column, cellValue, index) {
      const obj = employees.hireType.find((item) => item.id === cellValue)
      return obj ? obj.value : '未知'
    },
    inServiceStatus(row, column, cellValue, index) {
      const obj = employees.workingState.find(
        (item) => item.id === String(cellValue)
      )
      return obj ? obj.value : '未知'
    },
    async delEmployee(row) {
      console.log(row)
      const res = await delEmployee(row.id)
      console.log(res)
    },
    addEmployee() {
      this.showDialog = true
    },
    Employee() {
      this.getAllEmployees()
      this.showDialog = false
    },
    async exportData() {
      const excel = await import('@/vendor/Export2Excel')
      const headersEnum = {
        姓名: 'username',
        手机号: 'mobile',
        入职日期: 'timeOfEntry',
        聘用形式: 'formOfEmployment',
        转正日期: 'correctionTime',
        工号: 'workNumber',
        部门: 'departmentName'
      }
      const settingPage = {
        page: 1,
        size: this.total
      }
      if (this.multipleSelection.length === 0) {
        const { rows } = await getAllEmployees(settingPage)
        console.log(rows)
        const data = rows.map((item) => {
          const newItem = this.objTwoArr(item, headersEnum)
          // console.log(newItem)
          return newItem
        })
        const header = Object.keys(headersEnum)
        excel.export_json_to_excel({
          header, // 表头 必填
          data // 具体数据 必填  需要数组
        })
      } else {
        const data = this.multipleSelection.map((item) => {
          const newItem = this.objTwoArr(item, headersEnum)
          return newItem
        })
        const header = Object.keys(headersEnum)
        excel.export_json_to_excel({
          header,
          data
        })
      }
    },
    objTwoArr(item, dictionary) {
      // console.log(dictionary)
      const arr = []
      for (const key in dictionary) {
        // console.log(key)
        const enKey = dictionary[key]
        let value = item[enKey]
        // console.log(enKey)
        if (enKey === 'timeOfEntry' || enKey === 'correctionTime') {
          if (item[enKey] === null) {
            value = null
          } else {
            value = item[enKey].split('T')[0]
          }
        }
        if (enKey === 'formOfEmployment') {
          // console.log(item[enKey])

          if (item[enKey]) {
            const obj = employees.hireType.find(
              (data) => data.id === item[enKey]
            )
            obj ? (value = obj.value) : '1未知'
            // console.log(value)
          } else {
            // console.log(item[enKey])
            // console.log(123)
            value = '未知'
          }
          // console.log(value)
        }
        // console.log(value)
        arr.push(value)
      }
      return arr
    },
    handleSelectionAll(selection, first) {
      if (!first) {
        this.isAllSelect = !this.isAllSelect
      }
      selection.map(el => {
        if (el.children) {
          el.children.map(item => {
            this.toggleSelection(item, this.isAllSelect)
          })
          if (el.children.length > 0) {
            this.selectAll(el.children, true)
          }
        }
      })
    },
    toggleSelection(row, select) {
      if (select) {
        this.$refs.districtTable.toggleRowSelection(row, select)
      } else {
        this.$refs.districtTable.clearSelection()
      }
    },
    async showRole(id) {
      this.id = id
      await this.$refs.showRoleDailog.getRole()
      await this.$refs.showRoleDailog.getEmployeeDetail()
      this.showRoleDailog = true
    }
  }
}
</script>

<style>
</style>
